<template>
  <el-popover
    placement="bottom"
    trigger="hover"
    :open-delay="200"
    @show="loadImgCode"
    popper-class="no-min-width"
  >
    <div class="text-center">
      <el-image v-if="clicked" :src="codeUrl" v-loading="loading" class="s120 shrink-0" />
      <div class="info">使用微信扫一扫</div>
    </div>
    <el-button slot="reference" :size="size">
      <svg-icon icon-name="share" />
    </el-button>
  </el-popover>
</template>

<script>
export default {
  name: 'wx-share-code',
  props: {
    size: {
      type: String,
      default: 'small',
    },
    type: String,
    id: Number,
    page: String,
    scene: String,
    shareUrl: String,
  },
  data() {
    return {
      clicked: false,
      loading: false,
      codeUrl: this.shareUrl || '',
    };
  },
  mounted() {
    this.codeUrl = this.shareUrl;
  },
  methods: {
    // 获取小程序对应页面的二维码
    loadImgCode() {
      this.clicked = true;
      if (this.codeUrl) {
        const url = this.codeUrl;
        this.codeUrl = '';
        this.codeUrl = url;
        // return;
      }
      // 后台生成了
      // this.loading = true;
      // this.$api.other.wxCodeUrl({
      //   type: this.type,
      //   id: this.id,
      //   page: this.page,
      //   scene: this.scene,
      // }).then((res) => {
      //   setTimeout(() => {
      //     this.codeUrl = res.data.share_url;
      //     this.loading = false;
      //   }, 3000);
      //   this.codeUrl = res.data.share_url;
      // }).catch(() => { this.loading = false; });
    },
  },
};
</script>

<style lang="scss">
.no-min-width {
  min-width: unset;
}
</style>
